<template>
  <div class="login-container">
    <el-form @submit.prevent="handleLogin" class="login-form">
      <h2 class="form-title">医院门诊管理系统</h2>
      <!-- 添加标题 -->
      <el-form-item label="账号:" class="form-item">
        <el-input type="text" v-model="userId" required></el-input>
      </el-form-item>
      <el-form-item label="密码:" class="form-item">
        <el-input
          type="password"
          v-model="password"
          required
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="身份:" class="form-item">
        <el-select v-model="role" placeholder="请选择身份">
          <el-option label="患者" value="user"></el-option>
          <el-option label="医生" value="doctor"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 265px">
        <el-button type="primary" native-type="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      userId: "",
      password: "",
      role: "", // 添加一个用于存储选择身份的变量
    };
  },
  methods: {
    handleLogin() {
      console.log("userId:", this.userId);
      console.log("Password:", this.password);
      console.log("Role:", this.role); // 输出选择的身份
      if (this.role == "user") {
        request
          .get("/patient/login", {
            params: {
              id: this.userId,
              password: this.password,
            },
          })
          .then((res) => {
            if (res.data.state === "0") {
              console.log("id不存在");
              ElMessage({
                message: "账号不存在，请重新输入",
                type: "error",
                plain: true,
                offset: 270,
                duration: 1000,
              });
            } else if (res.data.state === "1") {
              console.log("密码错误");
              ElMessage({
                message: "账号密码不一致，请重新输入",
                type: "error",
                plain: true,
                offset: 270,
                duration: 1000,
              });
            } else {
              console.log("登陆成功");
              console.log(res.data);
              localStorage.setItem("user", JSON.stringify(res.data.patient));
              ElMessage({
                message: "账号密码正确，正在跳转页面。。。",
                type: "success",
                plain: true,
                offset: 270,
                duration: 1000,
              });
              setTimeout(() => {
                this.$router.push("/user");
              }, 1000);
            }
          })
          .catch((error) => {
            console.error("请求出错:", error);
          });
      } else if (this.role == "doctor") {
        request
          .get(`/doctor/login/${this.userId}/${this.password}`)
          .then((res) => {
            console.log(res);

            if (res.data.success) {
              const roletype = res.data.type;
              localStorage.setItem("doctor", res.data.name);
              localStorage.setItem("dId", this.userId);

              if (roletype === "1") {
                localStorage.setItem("roletype", "1");
                ElMessage({
                  message: "账号密码正确，正在跳转页面。。。",
                  type: "success",
                  plain: true,
                  offset: 270,
                  duration: 1000,
                });
                setTimeout(() => {
                  this.$router.push({ name: "DoctorDispensary" });
                }, 1000);
              } else if (roletype === "0") {
                localStorage.setItem("roletype", "0");
                ElMessage({
                  message: "账号密码正确，正在跳转页面。。。",
                  type: "success",
                  plain: true,
                  offset: 270,
                  duration: 1000,
                });
                setTimeout(() => {
                  this.$router.push({ name: "DoctorPatientList" });
                }, 1000);
              }
              console.log("登陆成功,用户名", res.data.name);
            } else {
              // 处理登录失败逻辑
              this.loginError = "登录失败，请检查您的账号和密码。";
              ElMessage({
                message: this.loginError,
                type: "error",
                plain: true,
                offset: 270,
                duration: 1000,
              });
            }
          })
          .catch((error) => {
            // 处理请求错误
            this.loginError = "请求出错，请稍后再试。";
            console.error("请求错误:", error);
          });
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  margin-top: 70px;
  width: 100%;
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto;
  padding: 20px; /* 增加内边距 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh; /* 设置最小高度 */
  position: relative; /* 添加相对定位 */
}

.login-form {
  width: 600px; /* 设置表单宽度 */
  padding: 20px; /* 增加内边距 */
  background-color: #f9f9f9; /* 添加背景颜色 */
  border-radius: 10px; /* 添加圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  min-height: 300px; /* 设置最小高度 */
  position: absolute; /* 绝对定位 */
}

.form-title {
  text-align: center; /* 标题居中 */
  margin-bottom: 20px; /* 标题下方增加间距 */
  font-size: 24px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
}

.form-item {
  margin-bottom: 30px; /* 增加表单项之间的间距 */
}
</style>
